<template>
<view class="box">
		<!-- 自定义导航栏 -->
		<view class="border">
			<!-- <view class="border_left" @click="onleft()">
				管理
			</view> -->
			<view class="border_center">
				购物车
			</view>
			<view class="border_right">

			</view>
		</view>
		<view class="border-lis"></view>

		<!-- 购物车内容显示 -->
		<view class="box_content">
			<view class="box_content_one" v-for="item in list" :key='item.id'>
				<view class="box_content_oput">
					<view class="box_content_oput_input" >
						<!-- <label >
							<checkbox :value="item.id" @change="checkboxChange($event,item.id)" :checked="item.isChecked" />
						</label> -->
						<checkbox-group @change="checkboxChange($event,item.id)">
							<checkbox :value="item.id" :checked="item.isChecked" />
						</checkbox-group>
					</view>
					<view class="box_content_oput_imges">
						<image :src="item.img" mode=""></image>
					</view>
				</view>
				<view class="box_content_number">
					<view class="box_content_title">
						{{item.name}}
					</view>
					<view class="box_content_effect">
						{{item.size}}
					</view>
					<view class="box_content_and">
						<view class="box_content_number_discount">
							￥{{item.price}}.00
						</view>
						<view class="box_content_number_original">
							{{item.prcs}}.00
						</view>
					</view>
				</view>
				<view class="calculator">
					<text class="left_i" @tap="editNum(item.id,-1)">-</text>
					<text class="center_con">{{item.count}}</text>
					<!-- <input class="center_con" type="text" value="1" /> -->
					<text class="right_i" @tap="editNum(item.id,1)">+</text>
				</view>
			</view>
		</view>
		
		<view v-if="boton_markes.length != ''" style="text-align: center; margin: auto; font-size: 14px; color: #F0F0F0;margin-bottom: 50rpx;">
			--------------------热卖推荐--------------------
		</view>

		<view class="box_botton" v-if="boton_markes.length != ''">
			<view class="box_bottcontent">
				<!-- goods_id -->
				<view class="box_bottent" v-for="(hell,indet) in boton_markes" :key="indet">
					<view class="box_boent_one">
						<!-- <image src="../../static/image/3_2.jpg" mode=""></image> -->
						<!--  ${{url}}/api/goods/goodsThumImages?goods_id=${{item.goods_id}}&width=400&height=400-->
						<image :src="hell.img_url" mode="widthFix">
					</view>
					<view class="box_boent_two">
						{{hell.goods_name}}888{{hell.goods_name}}
					</view>
					<view class="box_boent_three">
						<view class="box_boent_three_ins">
							<text>￥</text>
							{{hell.shop_price}}
							<text>00</text>
						</view>
						<view class="box_boent_three_let">
							已售{{hell.virtual_sales_sum}}件
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 底部导航栏 -->
		<view class="tabbar">
			<view class="all">
				<checkbox-group @change="checkboxChangeAll">
					<checkbox :checked="isAllChecked" />全选
				</checkbox-group>
			</view>
			<view class="totalPrice">
				<text class="totalPrice_ff">合计:</text>
				<text class="totalPrice_red">￥{{totalPrice}}.00</text>
			</view>
			<view class="submitOrder" @tap="submitOrder">
				付款
			</view>
		</view>
		<view style="width: 100%; height: 50rpx; background-color: #F0F0F0; margin-bottom: 50rpx;"></view>
	</view>


</template>

<script>
import { mapState, mapMutations, mapGetters } from "vuex";
export default {
  data() {
    return {
      //购物车有无商品
      show: true,
      //全选是否选中
      isAllChecked: false, //是否全选
      totalPrice: 0, //总价
      //商品
      list: [
        {
          id: "0",
          name: "爆款VC精华 韩夕梦377vc乙基醚 精",
          price: 89.0,
          prcs: 179.0,
          count: 1,
          size: "深层洁净除菌洗衣凝珠",
          img: "https://img0.baidu.com/it/u=1306953993,1077003894&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1703869200&t=14b9fadcd5dd19654036516ab0ae48b3",
        },
        {
          id: "1",
          name: "爆款VC精华 韩夕梦37韩夕梦韩夕梦韩夕梦韩夕梦韩夕梦韩夕梦韩夕梦韩夕梦7vc乙基醚 精",
          price: 89.0,
          prcs: 179.0,
          count: 1,
          size: "深层洁净除菌洗衣凝珠",
          img: "https://img0.baidu.com/it/u=1306953993,1077003894&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1703869200&t=14b9fadcd5dd19654036516ab0ae48b3",
        },
        {
          id: "2",
          name: "爆款VC精华 韩夕梦377v韩夕梦韩夕梦韩夕梦韩夕梦韩夕梦韩夕梦韩夕梦韩夕梦c乙基醚 精",
          price: 89.0,
          prcs: 179.0,
          count: 1,
          size: "深层洁净除菌洗衣凝珠",
          img: "https://img0.baidu.com/it/u=1306953993,1077003894&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1703869200&t=14b9fadcd5dd19654036516ab0ae48b3",
        },
        {
          id: "3",
          name: "爆款VC精华 韩夕梦377vc乙基醚 精",
          price: 89.0,
          prcs: 179.0,
          count: 1,
          size: "深层洁净除菌洗衣凝珠",
          img: "https://img0.baidu.com/it/u=1306953993,1077003894&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1703869200&t=14b9fadcd5dd19654036516ab0ae48b3",
        },
        {
          id: "4",
          name: "爆款VC精华 韩夕梦377vc乙基醚 精",
          price: 89.0,
          prcs: 179.0,
          count: 1,
          size: "深层洁净除菌洗衣凝珠",
          img: "https://img0.baidu.com/it/u=1306953993,1077003894&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1703869200&t=14b9fadcd5dd19654036516ab0ae48b3",
        },
      ],
      boton_markes: [],
    };
  },
  methods: {
    ...mapGetters("m_cart", ["total",]),
    ...mapState("m_cart", ["cart"]),
    setCart() {
      //计算总价
      let totalPrice = 0;
      this.list.forEach((v) => {
        if (v.isChecked) {
          totalPrice += v.count * v.price;
        }
      });
      this.totalPrice = totalPrice;
    },

    editNum(id, type) {
      //编辑数量
      const index = this.list.findIndex((v) => v.id == id);
      if (this.list[index].count == 1 && type == -1) {
        uni.showToast({
          title: "至少购买一件商品",
          icon: "none",
        });
      } else {
        this.list[index].count += type;
      }
      this.setCart();
    },

    // 全选
    checkboxChangeAll(e) {
      this.isAllChecked = !this.isAllChecked;
      this.list.forEach((v) => (v.isChecked = this.isAllChecked));
      this.setCart();
    },

    // 选择每一项
    checkboxChange: function (e, id) {
      console.log(e, id);
      var temp = [];

      // 找到被修改的商品对象
      let index = this.list.findIndex((v) => v.id === id);
      // 选中状态取反
      this.list[index].isChecked = !this.list[index].isChecked;

      temp = this.list.every((v) => v.isChecked);
      if (temp) {
        this.isAllChecked = true;
      } else {
        this.isAllChecked = false;
      }
      this.setCart();
    },
    // 管理 关闭checkbox标签
    // onleft(){
    // this.list.forEach(v => {
    // 	console.log('1',v)
    // 	if (v.isChecked) {
    // 		totalPrice += v.count * v.price
    // 	}
    // })
    // },

    submitOrder() {
      // 提交购物车订单
      // 判断是否选择购物车商品
      var bol = this.list.every((el) => el.isChecked == false);
      if (bol) {
        uni.showToast({
          title: "这些你都不喜欢吗，你是不是只喜欢喝水，你倒是选一个啊商品啊",
          icon: "none",
          duration: 2000,
        });
      } else {
        uni.showToast({
          title: "你肯定没有钱,还是算了吧",
          icon: "none",
          duration: 2000,
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  // background-color: #F0F0F0;
  background-color: #f9f5f5;

  .border {
    width: 100%;
    height: 130rpx;
    line-height: 160rpx;
    background-color: #ffffff;
    display: flex;
    justify-content: space-between;
    position: fixed;
    z-index: 999;
    top: 0;

    .border_left {
      padding: 14rpx 20rpx;
      font-size: 28rpx;
      color: #333333;
    }

    .border_center {
      padding-right: 96rpx;
      font-size: 36rpx;
      font-weight: 600;
    }
  }

  .border-lis {
    width: 100%;
    height: 130rpx;
  }

  .box_content {
    .box_content_one {
      width: 712rpx;
      height: 244rpx;
      background: #ffffff;
      border-radius: 20rpx;
      margin: 20rpx auto;
      margin-top: 30rpx;
      display: flex;
      box-sizing: border-box;
      position: relative;

      .box_content_oput {
        display: flex;

        .box_content_oput_input {
          padding: 92rpx 10rpx;

          /* #ifdef APP-PLUS ||MP-WEIXIN */
          checkbox .wx-checkbox-input {
            border-radius: 50% !important;
            /* color: #ffffff !important; */
          }

          checkbox .wx-checkbox-input.wx-checkbox-input-checked {
            color: #fff;
            background-image: linear-gradient(to right, #39fdce, #48e3fd);
          }

          /* .wx-checkbox-input.wx-checkbox-input-checked {
									border: none !important;
								} */
          /* #endif */
        }

        .box_content_oput_imges {
          width: 100%;
          margin: 30rpx 0rpx auto;

          image {
            width: 180rpx;
            height: 180rpx;
          }
        }
      }

      .box_content_number {
        padding: 35rpx 20rpx;

        .box_content_title {
          width: 412rpx;
          height: 52rpx;
          font-size: 28rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #000000;
          line-height: 28rpx;
          //字体超出俩行 隐藏显示省略号
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }

        .box_content_effect {
          width: 242rpx;
          height: 24rpx;
          font-size: 24rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #7e7e7e;
          line-height: 24rpx;
          background-color: #f9f5f5;
          margin: 20rpx 0rpx;
        }

        .box_content_and {
          display: flex;
          padding: 10rpx 0rpx;

          .box_content_number_discount {
            font-size: 40rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ff4e3b;
          }

          .box_content_number_original {
            color: #999999;
            font-size: 22rpx;
            padding: 15rpx 20rpx;
          }
        }
      }

      .calculator {
        position: absolute;
        display: flex;
        top: 62%;
        left: 78%;

        .left_i {
          width: 30rpx;
        }

        .center_con {
          width: 40rpx;
          background-color: #f6f6f6;
          padding: 0rpx 20rpx;
          text-align: center;
        }

        .right_i {
          width: 30rpx;
        }
      }
    }
  }

  .box_botton {
    width: 100%;
    margin-bottom: 50rpx;
    font-family: PingFangSC-Regular, PingFang SC;

    .box_bottcontent {
      width: 95%;
      margin: auto;
      display: flex;
      flex-flow: initial;
      flex-wrap: wrap;
      align-items: center;

      .box_bottent {
        // width: 330rpx;
        width: 46%;
        background: #ffffff;
        border-radius: 12rpx;
        margin: 15rpx 14rpx;
        box-sizing: border-box;

        .box_boent_one {
          width: 330rpx;
          height: 330rpx;
        }

        .box_boent_one image {
          width: 100%;
          height: 100%;
          border-radius: 12rpx;
        }

        .box_boent_two {
          width: 300rpx;
          height: 58rpx;
          padding: 20rpx 20rpx;
          font-size: 28rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #0f0c10;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }

        .box_boent_three {
          display: flex;
          flex-flow: initial;
          justify-content: space-between;
          padding: 20rpx 10rpx;

          .box_boent_three_ins {
            width: 130rpx;
            height: 28rpx;
            line-height: 28rpx;
            font-size: 36rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 600;
            color: #ff4e3b;
            display: flex;
            flex-direction: row;

            text {
              font-size: 20rpx;
              padding-top: 8rpx;
            }
          }

          .box_boent_three_let {
            font-size: 20rpx;
            color: #999999;
            background: #ffffff;
          }
        }
      }
    }
  }

  // 底部导航
  .tabbar {
    width: 100%;
    height: 112rpx;
    background-color: #ffffff;
    position: fixed;
    bottom: -5rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;

    // border-radius: 8% 8%;
    .all {
      font-size: 32rpx;
      color: #3e3e3e;
      letter-spacing: 2.29rpx;
      display: flex;

      /* #ifdef APP-PLUS ||MP-WEIXIN */
      checkbox .wx-checkbox-input {
        border-radius: 50% !important;
        /* color: #ffffff !important; */
      }

      checkbox .wx-checkbox-input.wx-checkbox-input-checked {
        color: #fff;
        background-image: linear-gradient(to right, #39fdce, #48e3fd);
      }

      /* .wx-checkbox-input.wx-checkbox-input-checked {
							border: none !important;
						} */
      /* #endif */
    }

    .totalPrice {
      letter-spacing: 2.29rpx;
      padding-left: 200rpx;

      .totalPrice_ff {
        font-size: 24rpx;
        color: #999999;
      }

      .totalPrice_red {
        font-size: 32rpx;
        color: #ff4e3b;
      }
    }

    .submitOrder {
      width: 208rpx;
      height: 80rpx;
      background-image: linear-gradient(to right, #38ffcb, #49e1ff);
      border-radius: 60rpx;
      font-size: 36rpx;
      color: #ffffff;
      letter-spacing: 2.57rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>